 <template>
    <div>
        <el-row>
            <!--检索-->
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <el-input v-if="false" v-model="search.pageNum"></el-input>
                <el-input v-if="false" v-model="search.pageSize"></el-input>
                <el-col :span="4">
                    <el-input v-model="search.name" placeholder="请输入名字"></el-input>
                </el-col>
                <el-col :span="12"
                    ><div>
                        <el-button type="primary" icon="el-icon-search" @click="searchBtn">搜索</el-button>
                        <el-button type="info" icon="el-icon-loading" @click="emptyBtn">刷新</el-button>
                    </div>
                </el-col></el-form>

            <el-button type="primary" @click="addBtn" icon="el-icon-circle-plus">新增</el-button>
            <!--功能列表-->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column align="center" type="index" prop="id" label="#" sortable> </el-table-column>
                <el-table-column align="center" prop="name" label="名字"> </el-table-column>
                <el-table-column align="center" prop="advertisePosition.name" label="位置"> </el-table-column>
             <el-table-column label="图片" align="center">
          　<template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.pic">

            </el-image>
          </template>
<!--          <img :src="avatar" class="userAvatar"-->
<!--                             style="display: block;width: 50px;height: 50px;-->
<!--                         border-radius: 50%;-webkit-border-radius: 50%;-->
<!--                         -moz-border-radius: 50%;-->
<!--                         border: 4px solid #44576b;box-sizing: border-box;margin: 10px auto 10px;">-->
        </el-table-column>
                <el-table-column align="center" prop="startTime" label="开始时间"> </el-table-column>
                 <el-table-column align="center" prop="endTime" label="结束时间" > </el-table-column>
                   <el-table-column align="center"
                    prop="status"
                    :formatter="getstatus"
                    label="上下线状态"
                    >     
                    </el-table-column>
                  <el-table-column align="center" prop="clickCount" label="点击数"> </el-table-column>
                  <el-table-column align="center" prop="orderCount" label="下单数"> </el-table-column>
                 <el-table-column align="center" prop="url" label="链接地址"> </el-table-column>
                 <el-table-column align="center" prop="note" label="备注"> </el-table-column>
                <el-table-column align="center" prop="sort" label="排序"> </el-table-column>
                <el-table-column align="center" label="操作" width="200px">
                    <template slot-scope="scope" align="center">
                        <el-button size="small" @click="updateInfo(scope.$index, scope.row)" icon="el-icon-edit" type="success">编辑</el-button>
                        <el-button size="small" @click="deleteInfo(scope.$index, scope.row)" icon="el-icon-delete" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页功能-->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNum"
                :page-sizes="[5, 10, 20, 100]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
            <!--新增/修改 Form -->
            <el-dialog title="广告" :visible.sync="editInfoState">
                <el-form :model="formInfo">
                    <el-form-item label="名字" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.name" placeholder="名字" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="位置" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.positionId" placeholder="位置Id" auto-complete="off"></el-input>
                    </el-form-item>

<el-form-item label="头像" :label-width="formLabelWidth">
            <el-image
              v-if="formInfo.pic == '' || formInfo.pic == null ? false : true"
              style="width: 100px; height: 100px"
              :src="formInfo.pic"
            ></el-image>

            <el-upload
              class="avatar-uploader"
              action="http://192.168.1.49:9999/common/upload/sure"
              name="file"
              :auto-upload="true"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

          </el-form-item>
                    <el-form-item label="开始时间" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.startTime" placeholder="开始时间" auto-complete="off" type="date"></el-input>
                    </el-form-item>
                    <el-form-item label="结束时间" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.endTime" placeholder="结束时间" auto-complete="off" type="date"></el-input>
                    </el-form-item>
                    <el-form-item label="下单数" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.orderCount" placeholder="下单数" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.note" placeholder="备注" auto-complete="off"></el-input>
                    </el-form-item>                   
                        <el-form-item label="上下线状态" :label-width="formLabelWidth">
                            <el-radio v-model="formInfo.status" :label="0">上线</el-radio>
                            <el-radio v-model="formInfo.status" :label="1">下线</el-radio>
                        </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editInfoState = false">取 消</el-button>
                    <el-button type="primary" @click="saveInfo">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
    </div>
</template>

 <script>

export default {
    data() {
        return {
            tableData: [],
            powerData: [],
            treeData: [],
            total: 0,
            defaultProps: {
                children: 'children',
                label: 'label'
            },
        
            page: {},
            formInfo: {},
            imageUrl:'',
            search: { pageNum:1, pageSize:10},
            formLabelWidth: '120px',
            editInfoState: false
            
        };
    },
    created: function () {
        this.load();
    },
    methods: {
        //初始化数据
        load() {
            // var _this = this;
            //页面初始化时，加载的方法
            this.$http.post('/marketing/advertise/list',this.search).then((response) => {
                console.log(response.data);
                this.tableData = response.data.data.list;
                this.total = response.data.data.total;
            });
        },
        //每页显示数量发生变化
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.search.pageSize = val;
            this.load();
        },
        //第几页发生变化
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.search.pageNum = val;
            this.load();
        },
        //查询
        searchBtn() {
            console.log(`当前页`);
            this.load();
        },
        //刷新
        emptyBtn() {
            this.search = {};
            this.search.pageNum = 1;
            this.search.pageSize = 10;
            this.load();
        },
        getStatusName(row, column, cellValue) {
            return cellValue == 1 ? '是' : '否';
        },
        addBtn() {
            this.formInfo = {};
            this.formInfo.pic='';
            this.editInfoState = true;
        },
        updateInfo: function (index, row) {
            this.formInfo = row;
            this.imageUrl=row.pic;
            this.editInfoState = true;
        },
        saveInfo: function () {
            var _this = this;
            this.formInfo.pic=this.imageUrl;
            if (_this.formInfo.id != null && _this.formInfo.id != '' && _this.formInfo.id != undefined) {
               this.$http.put('/marketing/advertise/updateById', _this.formInfo)
                    .then(function (response) {
                        //正确请求时，回调函数
                        console.log(response);
                        _this.load();
                        _this.editInfoState = false;
                    })
                    .catch(function (error) {
                        _this.editInfoState = false;
                        _this.load();
                        //失败处理
                        console.log(error);
                    });
            } else {
                this.formInfo.pic=this.imageUrl;
                this.$http.post('/marketing/advertise/save' , _this.formInfo)
                    .then(function (response) {
                        //正确请求时，回调函数
                        _this.load();
                        _this.editInfoState = false;
                    })
                    .catch(function (error) {
                        //失败处理
                        console.log(error);
                    });
            }
        },
            //上下线
     getstatus(row, column, cellValue){
      var tmpType = "";
      if (cellValue == 1) {
        tmpType = "上线";
      } else  {
        tmpType = "下线";
      } 
      return tmpType;s
    },
        deleteInfo: function (index, row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    var _this = this;
                    this.$http
                        .delete('/marketing/advertise/delete?id=' + row.id)
                        .then(function (response) {
                            if (response.status == 200) {
                                    //提示成功
                                    _this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                    //重新加载数据
                                    _this.load();
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                            _this.$message.error('你错了。。。');
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });           
        },



//图片上传成功后
    handleAvatarSuccess: function (res, file) {
      //图片回显

        console.log(file);
        this.imageUrl = res.data;
      // this.imageUrl = URL.createObjectURL(file.raw);
      //   alert(file.response);
      // alert(JSON.stringify(file.response));
      // this.formInfo.pic = file.response.ossFileUrlBoot;
      // this.form.fileName=file.response.oldFileName;
      // this.form.filePath=file.response.newFilePath;
    },
    //上传前图片类型和大小判断
    beforeAvatarUpload: function (file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
                      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};

</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.avatar {
    width: 100px;
    height: 100px;
    display: block;
}

</style>